<template>
    <div class="lease-container">
        <el-card class="box-card">
            <div>
                <h3 style="font-weight: 700; text-align: center">房屋信息</h3>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="房屋标题">
                        <el-input v-model="form.houseTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-input v-model="form.housePhone"></el-input>
                    </el-form-item>
                    <el-form-item label="房间价格">
                        <el-input v-model="form.housePrice" style="width: 300px;"></el-input>
                        <span style="margin-left: 20px; font-weight: 700; font-size: 16px; color: red">月/元</span>
                    </el-form-item>
                    <el-form-item label="房屋面积">
                        <el-input v-model="form.houseArea" style="width: 300px;"></el-input>
                        <span style="margin-left: 20px; font-weight: 700; font-size: 16px; color: red">平方米</span>
                    </el-form-item>
                    <el-form-item label="租赁方式">
                        <el-radio-group v-model="form.rentType">
                            <el-radio label="1">整租</el-radio>
                            <el-radio label="2">合租</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="房屋地址">
                        <el-row :gutter="20">
                            <el-col :span="10">
                                <el-cascader
                                        size="large"
                                        :options="options"
                                        v-model="selectedOptions"
                                        @change="handleChangeArea">
                                </el-cascader>
                            </el-col>
                            <el-col :span="10">
                                <el-input v-model="area" placeholder="请输入详细地址"></el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="房间类型">
                        <el-row>
                            <el-col :span="9">
                                厅数 <el-input-number v-model="form.hallNum" @change="handleChange" :min="0" :max="10" label="描述文字"></el-input-number>
                            </el-col>
                            <el-col :span="9">
                                室数 <el-input-number v-model="form.roomNum" @change="handleChange" :min="0" :max="10" label="描述文字"></el-input-number>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="合租人数">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                男 <el-input-number v-model="form.maleNum" @change="handleChange" :min="0" :max="10" label="描述文字"></el-input-number>
                            </el-col>
                            <el-col :span="10">
                                女 <el-input-number v-model="form.femaleNum" @change="handleChange" :min="0" :max="10" label="描述文字"></el-input-number>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <div>
                        <h3 style="margin-top: 10px; font-weight: 700;">房屋描述</h3>
                        <div id="houseDesc">
                        </div>
                    </div>
                </el-form>
                <div style="text-align: center; margin-top: 20px;">
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
    import E from "wangeditor";
    import {CodeToText, regionDataPlus} from 'element-china-area-data'
    export default {
        inject: ['reload'],
        name: "LeaseHouse",
        data() {
            return {
                options: regionDataPlus,
                selectedOptions: [],
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                num: 0,
                area: '',
                fileList: [],
                houseImage: '',
                form: {
                    housePhone: '',
                    housePlace: '',
                    houseArea: '',
                    housePrice: '',
                    rentType: '',
                    roomNum: '',
                    hallNum: '',
                    maleNum: '',
                    femaleNum: '',
                    releaseId: '',
                    houseState: 0,
                    houseTitle: '',
                    houseDesc: '',
                    deleteState: 1,
                }
            }
        },
        methods: {
            onSubmit() {
                this.form.housePlace = this.form.housePlace + this.area
                this.form.houseDesc = this.houseEditor.txt.html()
                this.form.releaseId = localStorage.getItem("userId")
                const _this = this
                _this.$http.post('/house/insertOneHouse', this.form).then(function (resp) {
                    if(resp.data.code === 202)
                    {
                        _this.$message.success("房间信息提交成功")
                    }else{
                        _this.$message.success("房屋信息提交失败")
                    }
                })
            },
            handleChange(value) {
                console.log(value);
            },
            handleChangeArea(value) {
                this.form.housePlace = CodeToText[value[0]] + ',' + CodeToText[value[1]] + ',' + CodeToText[value[2]] + ','
            },
        },
        mounted() {
            const _this = this
            this.houseEditor = new E('#houseDesc')
            this.houseEditor.config.onchange = function (newHtml) {
                console.log(newHtml)
            }
            this.houseEditor.config.height = 250
            this.houseEditor.config.placeholder = '请输入内容'
            // 取消自动 focus
            this.houseEditor.config.focus = false
            this.houseEditor.config.onblur = function (newHtml) {
                console.log('onblur', newHtml) // 获取最新的 html 内容
            }
            this.houseEditor.config.onfocus = function (newHtml) {
                console.log('onfocus', newHtml) // 获取最新的 html 内容
            }
            this.houseEditor.create()
            this.form.houseDesc = this.houseEditor.txt.html()
        }
    }
</script>

<style scoped>
    .lease-container {
        width: 1098px;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }
    >>>.avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    >>>.avatar-uploader .el-upload:hover {
        border-color: #83AF9B;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
